<template>
	<div style="height:100vh;display: flex;">
		<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
		<div id="stencil"></div>
		<div style="width:500px;height:500px;float: left;">
			<div id="container"></div>
		</div>
		<el-button @click="contBtn">获取画布内容</el-button>
	</div>
</template>

<script>
	import { Graph } from '@antv/x6'
	import { Stencil } from '@antv/x6-plugin-stencil'
	import { Selection } from '@antv/x6-plugin-selection'
	export default {
		data() {
			return {
				value: '',
				graph: null
			}
		},
		created() {

		},
		methods: {
			contBtn() {
				console.log(this.graph.toJSON())
			}
		},
		mounted() {
			const data = {
				nodes: [{
						id: 'node1',
						shape: 'rect',
						x: 40,
						y: 40,
						width: 100,
						height: 40,
						label: 'hello',
						attrs: {
							body: {
								stroke: '#8f8f8f',
								strokeWidth: 1,
								fill: '#fff',
								rx: 6,
								ry: 6,
							},
						},
					},
					{
						id: 'node2',
						shape: 'rect',
						x: 160,
						y: 180,
						width: 100,
						height: 40,
						label: 'world',
						attrs: {
							body: {
								stroke: '#8f8f8f',
								strokeWidth: 1,
								fill: '#fff',
								rx: 6,
								ry: 6,
							},
						},
					},
				],
				edges: [{
					shape: 'edge',
					source: 'node1',
					target: 'node2',
					label: 'x6',
					attrs: {
						line: {
							stroke: '#8f8f8f',
							strokeWidth: 1,
						},
					},
				}, ],
			}
			
			this.graph = new Graph({
				container: document.getElementById('container'),
				autoResize: true,
				background: {
					color: '#F2F7FA',
				},
				grid: {
					visible: true,
					type: 'doubleMesh',
					args: [{
							color: '#eee', // 主网格线颜色
							thickness: 1, // 主网格线宽度
						},
						{
							color: '#ddd', // 次网格线颜色
							thickness: 1, // 次网格线宽度
							factor: 4, // 主次网格线间隔
						},
					],
				},
			})
			//框选
			this.graph.use(
		      new Selection({
		        enabled: true,
		        multiple: true,
		        rubberband: true,
		        movable: true,
		        showNodeSelectionBox: true,
		        filter: ['custom-rect'],
		        content: '<div onclick="function(){alert(2)}()">测试</div><div onclick="()=>{alert(1)}()">主要按钮sss<br/>123</div>',
		      }),
		    )
			this.graph.on('node:selected', ( {node} ) => {
				this.graph.isSelected(node.id)
			})
			//			graph.fromJSON(data)
			const ports = {
				groups: {
					top: {
						position: 'top',
						attrs: {
							circle: {
								r: 4,
								magnet: true,
								stroke: '#5F95FF',
								strokeWidth: 1,
								fill: '#fff',
								style: {
									visibility: 'hidden',
								},
							},
						},
					},
					right: {
						position: 'right',
						attrs: {
							circle: {
								r: 4,
								magnet: true,
								stroke: '#5F95FF',
								strokeWidth: 1,
								fill: '#fff',
								style: {
									visibility: 'hidden',
								},
							},
						},
					},
					bottom: {
						position: 'bottom',
						attrs: {
							circle: {
								r: 4,
								magnet: true,
								stroke: '#5F95FF',
								strokeWidth: 1,
								fill: '#fff',
								style: {
									visibility: 'hidden',
								},
							},
						},
					},
					left: {
						position: 'left',
						attrs: {
							circle: {
								r: 4,
								magnet: true,
								stroke: '#5F95FF',
								strokeWidth: 1,
								fill: '#fff',
								style: {
									visibility: 'hidden',
								},
							},
						},
					},
				},
				items: [{
						group: 'top',
					},
					{
						group: 'right',
					},
					{
						group: 'bottom',
					},
					{
						group: 'left',
					},
				],
			}
			const stencil = new Stencil({
				title: '流程图',
				target: this.graph,
				stencilGraphWidth: 200,
				stencilGraphHeight: 180,
				collapsable: true,
				groups: [{
						title: '基础流程图',
						name: 'group1',
					},
					{
						title: '系统设计图',
						name: 'group2',
						graphHeight: 250,
						layoutOptions: {
							rowHeight: 70,
						},
					},
				],
				layoutOptions: {
					columns: 2,
					columnWidth: 80,
					rowHeight: 55,
				},
			})
			document.getElementById('stencil').appendChild(stencil.container)
			Graph.registerNode(
				'custom-rect', {
					inherit: 'rect',
					width: 66,
					height: 36,
					attrs: {
						body: {
							strokeWidth: 1,
							stroke: '#5F95FF',
							fill: '#EFF4FF',
						},
						text: {
							fontSize: 12,
							fill: '#262626',
						},
					},
					ports: { ...ports
					},
				},
				true,
			)
			Graph.registerNode(
				'custom-polygon', {
					inherit: 'polygon',
					width: 66,
					height: 36,
					attrs: {
						body: {
							strokeWidth: 1,
							stroke: '#5F95FF',
							fill: '#EFF4FF',
						},
						text: {
							fontSize: 12,
							fill: '#262626',
						},
					},
					ports: {
						...ports,
						items: [{
								group: 'top',
							},
							{
								group: 'bottom',
							},
						],
					},
				},
				true,
			)
			Graph.registerNode(
				'custom-circle', {
					inherit: 'circle',
					width: 45,
					height: 45,
					attrs: {
						body: {
							strokeWidth: 1,
							stroke: '#5F95FF',
							fill: '#EFF4FF',
						},
						text: {
							fontSize: 12,
							fill: '#262626',
						},
					},
					ports: { ...ports
					},
				},
				true,
			)
			Graph.registerNode(
				'custom-image', {
					inherit: 'rect',
					width: 52,
					height: 52,
					markup: [{
							tagName: 'rect',
							selector: 'body',
						},
						{
							tagName: 'image',
						},
						{
							tagName: 'text',
							selector: 'label',
						},
					],
					attrs: {
						body: {
							stroke: '#5F95FF',
							fill: '#5F95FF',
						},
						image: {
							width: 26,
							height: 26,
							refX: 13,
							refY: 16,
						},
						label: {
							refX: 3,
							refY: 2,
							textAnchor: 'left',
							textVerticalAnchor: 'top',
							fontSize: 12,
							fill: '#fff',
						},
					},
					ports: { ...ports
					},
				},
				true,
			)

			const r1 = this.graph.createNode({
				shape: 'custom-rect',
				label: '开始',
				attrs: {
					body: {
						rx: 20,
						ry: 26,
					},
				},
				html: {
	                render(node) {
	                    return (
	                        `<div style='color:red;padding-left:20px;'>
	                        <p>节点</p>
	                        <p>节点内容</p>
	                    </div>`
	                    )
	                }
            	}
			})
			const r2 = this.graph.createNode({
				shape: 'custom-rect',
				label: '过程',
			})
			const r3 = this.graph.createNode({
				shape: 'custom-rect',
				attrs: {
					body: {
						rx: 6,
						ry: 6,
					},
				},
				label: '可选过程',
			})
			const r4 = this.graph.createNode({
				shape: 'custom-polygon',
				attrs: {
					body: {
						refPoints: '0,10 10,0 20,10 10,20',
					},
				},
				label: '决策',

			})
			const r5 = this.graph.createNode({
				shape: 'custom-polygon',
				attrs: {
					body: {
						refPoints: '10,0 40,0 30,20 0,20',
					},
				},
				label: '数据',
			})
			const r6 = this.graph.createNode({
				shape: 'custom-circle',
				label: '连接',
				attrs: {
//			    body: {
//			      fill: '#f5f5f5',
//			      stroke: '#d9d9d9',
//			      strokeWidth: 1,
//			    },
			  },
			})
			stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
			// 控制连接桩显示/隐藏
			const showPorts = (ports, show) => {
				for(let i = 0, len = ports.length; i < len; i += 1) {
					ports[i].style.visibility = show ? 'visible' : 'hidden'
				}
			}
			this.graph.on('node:mouseenter', () => {
				const container = document.getElementById('container')
				const ports = container.querySelectorAll(
					'.x6-port-body',
				)
				showPorts(ports, true)
			})
			this.graph.on('node:mouseleave', () => {
				const container = document.getElementById('container')
				const ports = container.querySelectorAll(
					'.x6-port-body',
				)
				showPorts(ports, false)
			})
			
			
			//删除
			const target = this.graph.addNode({
			  x: 150,
			  y: 150,
			  shape: 'custom-circle',
  			  label: '总',
			})
			this.graph.on('node:mouseenter', ({ node }) => {
			  if (node !== target) {
			    node.addTools({
			      name: 'button-remove',
			      args: {
			        x: 0,
			        y: 0,
			        offset: { x: 10, y: 10 },
			      },
			    })
			  }
			})		
			this.graph.on('node:mouseleave', ({ node }) => {
			  if (node !== target) {
			    node.removeTools()
			  }
			})
			this.graph.on('node:click', ({ node, e }) => {
				console.log(e)
				console.log(node)
			})
			//  		graph.centerContent()
		}
	}
</script>

<style>
	#stencil {
		width: 180px;
		height: 100%;
		position: relative;
		border-right: 1px solid #dfe3e8;
	}
	.x6-widget-selection-box {
    border: 2px dashed #239edd;
  }
  .x6-widget-selection-inner {
    border: 1px solid #239edd;
  }
</style>